<template>
    <fieldset>
        <legend>购物车</legend>
        <ul>
            <li v-for="item in cartData" :key="item.id">
               <b>{{item.title}}</b> 
               -------
               <b>{{item.price}}</b>
               -------
               <b>{{item.count}}</b>
               -------
               <button @click="remove(item)">点击移出</button>
            </li>
        </ul>
        <h1>总价:{{total}}</h1>
    </fieldset>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex'
    export default {
        computed: {
            ...mapState('cart',['cartData']),
            ...mapGetters('cart',['total'])
        },
        methods: {
            ...mapActions('cart',['REMOVE_ACR']),
            remove(item){
                this.REMOVE_ACR(item)
                
            }
        }
    }


</script>